<template>
  <div>
    <Article-Swiper :data="articles"></Article-Swiper>
    <Article-item :data="item" v-for="item of articles" :key="item.id" @click.native="handleArticle(item._id)"></Article-item>

  </div>
</template>

<script>
import ArticleItem from './components/ArticleItem'
import ArticleSwiper from './components/ArticleSwiper.vue';
export default {
  data() {
    return {
      articles:[]
    }
  },
  components:{
    ArticleItem,
    ArticleSwiper
  },
   mounted() {
    this.$http.get("http://47.108.197.28:4000/api/article").then((res) => {
      console.log(res.data.res);
      this.articles=res.data.res

    });
  },
  methods: {
    handleArticle(val) {
      console.log(val);
      var id = val;
      this.$router.push(`/ArticleDetail/${id}`);
    },
  },
}
</script>

<style>

</style>